<template>
	<view class="piclist">
		<custom-head-top>
			<template #left>
				壁纸管理
			</template>
			<template #right>
				<uni-data-select ref="selectRef" style="width: 200px;" @change="classifyChange"
					collection="xxm-bizhi-classify" field="_id as value, name as text, sort" :where="`enable==true`"
					orderBy="sort asc" v-model="selevtValue"></uni-data-select>
				<button type="primary" size="mini" @click="handleAdd">
					<uni-icons type="plusempty" size="14" color="#fff"></uni-icons>
					新增分类
				</button>
			</template>
		</custom-head-top>
		<view class="main">
			<uni-table class="table" ref="tableRef" border stripe emptyText="暂无更多数据">
				<uni-tr>
					<uni-th align="left">缩略图</uni-th>
					<uni-th align="left">分类</uni-th>
					<uni-th align="left" sortable @sort-change="scoreChange">评分</uni-th>
					<uni-th align="left">评分数</uni-th>
					<uni-th align="left">下载数</uni-th>
					<uni-th align="left" sortable @sort-change="viewChange">阅读数</uni-th>
					<uni-th align="left">是否可见</uni-th>
					<uni-th align="left">发布人</uni-th>
					<uni-th align="left">发布时间</uni-th>
					<uni-th align="right" width="200">操作</uni-th>
				</uni-tr>
				<uni-tr v-for="item in piclist" :key="item._id">
					<uni-td class="thumb">
						<image @click="previewImg(item.picurl)" :src="getSmallImg(item.picurl)" mode="aspectFill">
						</image>
					</uni-td>
					<uni-td>{{item.classname[0]}}</uni-td>
					<uni-td class="score">
						<uni-rate class="uni-rate" :disabled="true" disabled-color="#F7E7CE" size="16"
							:value="item.score"></uni-rate>
						<text class="text">{{item.score}}</text>
					</uni-td>
					<uni-td>{{item.score_count || 0}}</uni-td>
					<uni-td>{{item.download_count || 0}}</uni-td>
					<uni-td>{{item.view_count || 0}}</uni-td>
					<uni-td>
						<switch :checked="item.checked" @change="checkedChange($event, item._id)" class="switchStyle" />
					</uni-td>
					<uni-td>{{item.nickname[0]}}</uni-td>
					<uni-td>{{dayjs(item.createTime).format("YYYY/MM/DD HH:mm:ss")}}</uni-td>
					<uni-td>
						<view class="operate-btn-group">
							<button size="mini" type="primary" plain @click="update(item._id)">编辑</button>
							<button size="mini" type="warn" plain @click="remove(item._id)">删除</button>
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>

		<!-- 分页 -->
		<view class="paginate">
			<uni-pagination :total="params.total" :current="params.current" :page-size="params.size"
				@change="pageChange" :show-icon="true"></uni-pagination>
		</view>

		<!-- 编辑弹窗 -->
		<piclistPopue ref="picPopRef" v-model:item="picItem" @success="getData()"></piclistPopue>
	</view>
</template>

<script setup>
	import { onMounted, ref } from 'vue';
	import { previewImg, routerTo, showModal, showToast } from '../../utils/common';
	import { getSmallImg } from '../../utils/tools';
	import dayjs from 'dayjs';
	import piclistPopue from './children/piclistPopue.vue';

	const selectRef = ref(null);
	const piclist = ref([]);
	const tableRef = ref(null);
	const picPopRef = ref(null);
	const picItem = ref({});
	const selevtValue = ref("");
	const picCloudObj = uniCloud.importObject("admin-bizhi-picture");
	const params = ref({
		current: 1,
		total: 0,
		size: 5,
		classid: "",
		viewSort: "",
		scoreSort: "",
	})


	//vue的生命周期
	onMounted(() => {
		selectRef.value.clearVal();
	})

	//跳转添加壁纸列表页面
	const handleAdd = () => {
		routerTo("/pages/bizhi/picadd")
	}

	//切换分页
	const pageChange = (e) => {
		params.value.current = e.current;
		getData();
	}

	//获取壁纸列表
	const getData = async () => {
		try {
			let { errCode, errMsg, data, count } = await picCloudObj.list(params.value);
			if (errCode !== 0) showToast({ title: errMsg });
			piclist.value = data;
			params.value.total = count;
			console.log(params.value);
		} catch (err) {
			showToast({ title: err });
		}
	}


	//右上方壁纸类型切换
	const classifyChange = (e) => {
		params.value.classid = e;
		params.value.current = 1;
		getData();
	}


	//修改是否可见
	const checkedChange = async (e, id) => {
		try {
			uni.showLoading({ mask: true })
			let { errCode, errMsg } = await picCloudObj.update({ _id: id, checked: e.detail.value });
			if (errCode !== 0) return showToast({ title: errMsg });
			getData();
		} catch (err) {
			console.log(err);
		} finally {
			uni.hideLoading();
		}
	}

	//根据评分排序
	const scoreChange = (e) => {
		let { order } = e;
		params.value.scoreSort = order == 'ascending' ? 'asc' : order == 'descending' ? 'desc' : '';
		getData();
	}

	//根据阅读量排序
	const viewChange = (e) => {
		let { order } = e;
		params.value.viewSort = order == 'ascending' ? 'asc' : order == 'descending' ? 'desc' : '';
		getData();
	}

	//编辑信息
	const update = async (id) => {
		try {
			let { errCode, errMsg, data } = await picCloudObj.item(id);
			if (errCode !== 0) showToast({ title: "数据异常" });
			picItem.value = { ...data, tempurl: data.picurl };
			picPopRef.value.open();
		} catch (err) {
			console.log(err);
		}
	}

	//删除信息
	const remove = async (id) => {
		try {
			let feedback = await showModal({ content: "是否确认删除?" })
			console.log(feedback);
			if (feedback !== 'confirm') return;
			uni.showLoading({ mask: true })
			let { errCode, errMsg } = await picCloudObj.remove([id]);
			if (errCode !== 0) showToast({ title: errMsg });
			getData();
		} catch (err) {
			console.log(err);
			showToast({ title: err })
		} finally {
			uni.hideLoading()
		}

	}
</script>

<style lang="scss" scoped>
	.main {
		padding: 20px;

		.table {
			.thumb {
				image {
					width: 45px;
					height: 100px;
				}
			}

			.score {
				.uni-rate {
					display: inline-block;
				}

				.text {
					padding-left: 5px;
				}
			}
		}
	}

	.popue {
		width: 600px;
		min-height: 300px;
		background: #fff;
		padding: 50px;
	}
</style>